<template>
  <div class="recordDetail">
    <Navbar :appTitle="$route.meta.title" @ClickRight="ClickRight" />
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.pickingCode || "-" }}</div>

          <div class="row">
            下发时间：<span style="color:#191f25">{{
              detailInfo.createTime || "-"
            }}</span>
          </div>
          <!-- <div class="row" v-if="detailInfo.outWarehouseType  == '1'">
            生产工单：<span style="color:#191f25">{{
              detailInfo.orderCode || "--"
            }}</span>
          </div> -->
          <!-- <div class="row" v-if="detailInfo.outWarehouseType  == '0'">
            销售订单：<span style="color:#191f25">{{
              detailInfo.orderCode || "--"
            }}</span>
          </div> -->
        </div>
      </div>
    </div>
    <van-tabs
      v-model="active"
      :offset-top="158"
      line-width="2.4rem"
      title-active-color="#108ee9"
      color="#1890FF"
    >
      <van-tab title-class="tab-wrap-ano-detail" title="物品明细">
        <div
          class="list"
          :style="{
            height:
              detailInfo.outWarehouseType != 0 &&
              detailInfo.outWarehouseType != 1
                ? '69vh'
                : '69vh',
          }"
          v-if="entryDetails && entryDetails.length != 0"
        >
          <div v-for="(item, index) in entryDetails" :key="index" class="wrap">
            <div class="top">
              <div class="icon"></div>
              <div class="title">
                {{ item.goodsCode }} | {{ item.goodsName }}|
                {{ item.goodsSpec }}
              </div>
            </div>
            <div class="center">
              <div>
                <p>
                  <span class="key">包装规格：</span>
                  <span class="value">{{ item.packageSpec || "-" }}</span>
                </p>
                <p>
                  <span class="key">产地：</span>
                  <span class="value">{{ item.address || "-" }}</span>
                </p>
                <p>
                  <span class="key">待核验/拣货数量：</span>
                  <span class="value"
                    >{{ item.unVerificationNum || "0" }}/{{
                      item.pickingQuantity || "0"
                    }}</span
                  >
                </p>
                <div class="labels" >
                  <div class="tag">{{ item.produceDate || "-" }}</div>
                  <div class="tag">{{ item.batchCode || "-" }}</div>
                  <div class="tag">{{ item.unitIdText || "-" }}</div>
                </div>
              </div>
            </div>
            <div
              v-for="(itemList, listIndex) in item.itemList"
              :key="listIndex"
              class="wrap bb"
              style="margin-bottom: 0"
            >
              <div class="top">
                <div class="title">拣货({{ listIndex + 1 }})</div>
              </div>
              <div class="center">
                <div>
                  <p>
                    <span class="key">拣货库位：</span>
                    <span class="value"
                      >{{ itemList.latticeCode || "-" }}|{{
                        itemList.latticeName || "-"
                      }}</span
                    >
                  </p>
                  <p>
                    <span class="key">拣货批号：</span>
                    <span class="value">{{
                      itemList.goodsBatchId || "-"
                    }}</span>
                  </p>
                  <p>
                    <span class="key">待核验/拣货数量：</span>
                    <span class="value"
                      >{{ itemList.unVerificationNum || "0" }}/{{
                        itemList.pickingQuantity || "0"
                      }}</span
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="物品明细为空" />
      </van-tab>
      <van-tab title-class="tab-wrap-ano-detail" title="核验出库记录">
        <div
          class="list"
          :style="{
            height:
              detailInfo.outWarehouseType != 0 &&
              detailInfo.outWarehouseType != 1
                ? '69vh'
                : '69vh',
          }"
          v-if="tasksList && tasksList.length != 0"
        >
          <div v-for="(item, index) in tasksList" :key="index" class="wrap">
            <div class="top">
              <div class="icon"></div>
              <div class="title">
                {{ item.taskCode }}
              </div>
            </div>
            <div class="center">
              <div>
                <p>
                  <span class="key">物品明细：</span>
                  <span class="value">{{ item.goodsClassNum || "0" }}</span>
                </p>
                <p>
                  <span class="key">物品数量：</span>
                  <span class="value">{{ item.goodsNum || "" }}</span>
                </p>
                <p>
                  <span class="key">创建人：</span>
                  <span class="value">{{ item.createByText || "-" }}</span>
                </p>

                <p>
                  <span class="key">创建时间：</span>
                  <span class="value">{{ item.createTime || "-" }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="收货记录为空" />
      </van-tab>
      <van-tab title="单据信息">
        <div
          class="list"
          :style="{
            height:
              detailInfo.outWarehouseType != 0 &&
              detailInfo.outWarehouseType != 1
                ? '65vh'
                : '65vh',
          }"
        >
          <div class="wrap">
            <div class="center">
              <div>
                <p>
                  <span class="key">业务类型：</span>
                  <span class="value">{{ detailInfo.typeText || "-" }}</span>
                </p>

                <p>
                  <span class="key">出库任务编号：</span>
                  <span class="value">{{
                    detailInfo.outboundCode || "-"
                  }}</span>
                </p>
                <p>
                  <span class="key">拣货员：</span>
                  <span class="value">{{ detailInfo.picker || "-" }}</span>
                </p>
                <p>
                  <span class="key">下发人：</span>
                  <span class="value">{{
                    detailInfo.createByName || "-"
                  }}</span>
                </p>
                <p>
                  <span class="key">下发时间：</span>
                  <span class="value">{{ detailInfo.createTime || "-" }}</span>
                </p>
                <p v-if="detailInfo.type!=='OTHER'">
                  <span class="key">客户：</span>
                  <span class="value">{{
                    detailInfo.customerName || "-"
                  }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <van-empty description="单据信息为空" />
      </van-tab>
      <van-tab title-class="tab-wrap-ano-detail" disabled></van-tab>
    </van-tabs>
    <!--操作按钮-->
    <div class="search-bottom">
      <div class="searchContain"></div>
      <div class="searchContain">
        <!-- v-if="detailInfo.issuedNum == 0" -->
        <span
          class="btn del"
          @click="btnDelete"
          v-if="detailInfo.verificationNum == 0"
          >删除</span
        >
        <span
          class="btn confirm"
          @click="verification"
          v-if="$route.query.unVerificationNum > 0"
          >核验</span
        >
        <!-- v-if="detailInfo.outboundGoodsNum - detailInfo.issuedNum > 0" -->
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import pageList from "@/components/pageList";
import {
  outboundTasksDetail,
  wmsPickingTaskQueryById,
  outboundTasksList,
  wmsWarehouseOperateQueryByPage,
  pickingTTasksDetailList,
  formTypeExtendedFieldList,
  wmsPickingTaskdelete,
  wmsPickingTaskdDetailsList,
} from "@/api/mobile";
import store from "@/store";
import { Dialog } from "vant";

export default {
  name: "wmsPickingTaskdDetailsList", //拣货任务详情
  components: { Navbar, pageList },
  data() {
    return {
      active: 0,
      detailInfo: {},
      entryDetails: [],
      pickingDetails: [],
      formTypeExtendedFields: [],
      tasksList: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
    this.getDetail();
  },
  methods: {
    btnDelete() {
      Dialog.confirm({
        title: "确定删除拣货任务吗？",
        // message:
        //   "拣货任务删除后，库存会同步增加，拣货任务明细会同步删除，删除后不可恢复。",
        confirmButtonColor: "#2b85e4",
      })
        .then(() => {
          console.log(this.detailInfo);
          wmsPickingTaskdelete({ id: this.$route.query.id }).then((res) => {
            if (res.success) {
              this.$toast("拣货任务删除成功");
              this.$router.go(-1);

              // this.searchQuery();
            } else {
              this.$toast(res.message);
            }
          });
        })
        .catch(() => {});
    },

    btnDetail(e) {
      this.$router.push({
        title: "编辑拣货任务",
        path: "/outboundTasksForm",
        query: {
          id: this.$route.query.id,
        },
      });
    },

    async getDetail() {
      // 获取出入库自定义表单字段;
      // await formTypeExtendedFieldList({ formType: 5 }).then((res) => {
      //   if (res.code == 200 && res.result) {
      //     this.formTypeExtendedFields = res.result;
      //   }
      // });

      let id = this.$route.query.id;
      wmsPickingTaskQueryById({ id: this.$route.query.id }).then((res) => {
        if (res.code == 200 && res.result) {
          this.detailInfo = res.result;
          this.detailInfo.verificationNum = this.$route.query.verificationNum;
          this.entryDetails = res.result.detailsList;

          // for (const item in this.detailInfo.extDataJson) {
          //   this.formTypeExtendedFields.map((ele) => {
          //     if (ele.fieldKey == item) {
          //       ele.fieldValue = this.detailInfo.extDataJson[item];
          //     }
          //   });
          // }
          // this.detailInfo.extDataJson = this.formTypeExtendedFields;
        } else {
          // this.$toast(res.message);
        }
      });
      wmsWarehouseOperateQueryByPage({
        sourceId: id,
        operateType: 2,
        type: 1,
      }).then((res) => {
        this.tasksList = res.result.records;
      });
      // pickingTTasksDetailList({ outboundTaskId: id }).then((res) => {
      //   if (res.code == 200 && res.result) {
      //     this.pickingDetails = res.result.records;
      //   } else {
      //     this.$toast(res.message);
      //   }
      // });
    },
    verification() {
      this.$router.push({
        path: "/pickingTasksVerification",
        query: { id: this.$route.query.id },
      });
    },
    ClickRight() {
      this.$router.push({
        path: "/application",
      });
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recordDetail {
  height: 100vh;
  overflow: hidden;

  .d-head {
    width: 100%;
    padding: 32px;
    background: #ffffff;

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        flex: 1;

        .title {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 32px;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }

        .row {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 20px;
        }
      }

      .right {
        flex: 1;

        .rightImg {
          display: block;
          width: 55px;
          height: 55px;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }

  .otherTaps {
    background: #ffffff;
    padding: 32px;
    margin-top: 20px;

    .title {
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;

      .icon {
        display: inline-block;
        width: 6px;
        height: 28px;
        background: #1890ff;
      }

      .content {
        width: 126px;
        height: 32px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 44px;
        margin-left: 20px;
      }
    }

    .content {
      .row {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 32px;
        display: flex;

        .r-label {
          color: #888888;
          display: block;
          // width: 0.7rem;
          //   border: 1px solid red;
        }

        .r-column {
          display: block;
          color: #191f25;
          width: 500px;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }

      .fhrow {
        display: flex;

        .fhImg {
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 0.1rem;
        }

        .rt-column {
          width: 2.55rem;
          //   height: 2.55rem;
          margin-left: 0.2rem;

          .rt-title {
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 0.16rem;
          }

          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.23rem;

            .column {
              //    border: 1px solid red;
              width: 1.5rem;

              .column-t {
                font-size: 0.14rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 0.03rem;
              }

              .column-c {
                font-size: 0.16rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }

  .search-bottom {
    width: 100%;
    height: 100px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0 11px;
    box-sizing: border-box;
    font-size: 32px;
    font-weight: 500;
    z-index: 9;

    .searchContain {
      .btn {
        display: inline-block;
        box-sizing: border-box;
        width: 124px;
        height: 64px;
        align-items: center;
        border-radius: 6px;
        margin-right: 18px;
        text-align: center;
        line-height: 64px;
      }

      .confirm {
        background: #1890ff;
        color: #ffffff;
      }

      .cancel {
        border: 1px solid #b2b2b2;
        background: #f6f6f6;
        color: #5a5a5a;
      }
    }
  }
}

.detail-bottom {
  height: 1.3rem;
  width: 100%;
  background: #ffffff;
  // background: red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0px;
  padding: 0.4rem;
  font-size: 24px;

  .btnconfirm {
    padding: 0.2rem 0.4rem;

    background: #1890ff;
    border-radius: 0rem;
    text-align: center;
    line-height: 0.39rem;
    color: #ffffff;
  }

  .btncancel {
    // width: 1.72rem;
    // height: 0.6rem;
    font-size: 0.38rem;
    color: #6c6666;
    padding: 0.2rem 0.4rem;
    background: rgb(255, 255, 255);
    border: 0.01px solid rgba(25, 31, 37, 0.12);
    border-radius: 0rem;
    text-align: center;
    line-height: 0.39rem;
    margin-right: 0.4rem;
  }

  .btndetail {
    // width: 1.72rem;
    // height: 0.6rem;
    font-size: 0.38rem;
    color: #6c6666;
    padding: 0.2rem 0.4rem;
    background: rgb(255, 255, 255);
    border: 0.01px solid rgba(25, 31, 37, 0.12);
    border-radius: 0rem;
    text-align: center;
    line-height: 0.39rem;
    margin-right: 0.4rem;
  }
}

/deep/ .van-tabs__line {
  background-color: rgb(24, 144, 255);
  width: 150px !important;
  transform: translateX(62.5px) translateX(-50%);
  transition-duration: 0.3s;
}

.contentBox {
  margin-top: 1.38rem;
}

.otherMargin {
  height: 0.1rem;
  background: #f5f5f5;
}

.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0.16rem 0.16rem 0 0.06rem;
}

.ExamineBottom {
  height: 0.5rem;
}

.status {
  display: inline-block;
  margin-top: 0.16rem;
  padding: 0.03rem 0.08rem;
  background: #edf6ff;
  border-radius: 0.02rem;
  font-size: 0.11rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3774ac;
}

.list {
  height: 69vh;
  overflow: scroll;

  .wrap {
    background: #fff;
    margin: 24px 0;
    padding: 30px;
    // width: 100vw;
    .top {
      display: flex;
      justify-content: flex-start;

      .icon {
        width: 6px;
        height: 36px;
        background: #1890ff;
        margin-top: 6px;
        margin-right: 20px;
      }

      .title {
        width: 620px;
        margin-right: 20px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191f25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .spot img {
        width: 40px;
        height: 40px;
      }
    }

    .center {
      p {
        margin: 16px 25px;
        font-size: 28px;
        display: flex;
        position: relative;

        .key {
          color: #888888;
        }

        .value {
          color: #191f25;
          //width: 380px;
          flex: 1;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .arrow {
          color: #1890ff;
          // float: right;
          // margin-right: -0.05rem;
          // display: block;
          position: absolute;
          right: -10px;
        }
      }

      .label {
        margin-left: -0.03rem;
        margin-top: -0.1rem;

        span {
          height: 0.16rem;
          background: #f0f6fe;
          color: #1890ff;
          margin-right: 0.1rem;
          padding: 0.03rem 0.08rem;
          font-size: 0.11rem;
          border-radius: 0.03rem;
        }
      }

      .showAll {
        background: #f5f8ff;
        width: 100vw;
        margin-left: -0.15rem;
        padding: 0.15rem;
        margin-bottom: 0.15rem;
      }

      .fontAno {
        font-size: 30px;
        padding-left: 20px;
      }
    }

    .label {
      margin-left: -0.03rem;
      margin-top: -0.1rem;

      span {
        height: 0.16rem;
        background: #f0f6fe;
        color: #1890ff;
        margin-right: 0.1rem;
        padding: 0.03rem 0.08rem;
        font-size: 0.11rem;
        border-radius: 0.03rem;
      }
    }

    .foot {
      // height: 0.33rem;
      // line-height: 0.33rem;
      display: flex;
      justify-content: space-between;
      // margin: 0.15rem 0.12rem 0 0.12rem;
      font-size: 0.14rem;

      .pictures {
        width: 0.33rem;
        height: 0.33rem;
        line-height: 0.33rem;
        text-align: center;
        color: #fff;
        background: #1890ff;
        display: block;
        border-radius: 0.06rem;
        font-size: 0.12rem;
        margin-right: 0.1rem;
      }

      .text {
        width: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .opera {
        color: #1890ff;
        font-size: 0.14rem;
      }
    }
  }

  .wrap.bb {
    border-top: 1px solid #eee;
    padding-bottom: 0;
  }
}


.labels {
  display: flex;
  align-items: center;
  margin-left: 20px;
  .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #f0f6fe;
    color: #1890ff;
    margin-right: 0.1rem;
    padding: 0.03rem 0.08rem;
    font-size: 26px;
    border-radius: 4px;
  }
}

.del {
  background: #ff5f4e;
  color: #fff;
}
</style>
